<template>
  <div class="container">
    <van-popup round v-model="popupShow" position="bottom" @close="popupClose">
      <template v-if="popupState == 'picker'">
        <!-- <van-picker show-toolbar :columns="pickerData" @confirm="pickerConfirm" @cancel="pickerCancel"><template
            v-if="pickerType == 'nationality'" #columns-top>
            <van-search v-model="data.search" placeholder="可模糊检索" @input="searchChange(pickerType)" class="search-body">
            </van-search>
          </template></van-picker> -->
        <van-picker
          show-toolbar
          :columns="pickerData"
          @confirm="pickerConfirm"
          @cancel="pickerCancel"
        ></van-picker>
      </template>
      <template v-if="popupState == 'datePicker'">
        <van-datetime-picker
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="datePickerConfirm"
          @cancel="datePickerCancel"
        >
        </van-datetime-picker>
      </template>
      <template v-if="popupState == 'cascader'">
        <van-cascader
          :field-names="fieldNames"
          v-model="cascaderValue"
          title="请选择所属区域"
          :options="cascadeOptions"
          active-color="#D58913"
          @finish="cascaderFinish"
          @close="cascaderClose"
        />
      </template>
      <template v-if="popupState == 'search'">
        <div class="search">
          <van-search
            v-model="data.name"
            placeholder="请输入"
            @input="searchChange(searchType)"
            class="search-body"
          >
          </van-search>
          <div class="search-page">
            <van-empty v-show="dataList.length <= 0" description="" />
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              :error.sync="errorLoading"
              error-text="请求失败，点击重新加载"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div
                class="search-page-item"
                :class="{ 'item-active': item.isChecked }"
                v-for="(item, index) in dataList"
                :key="index"
                @click="itemAction(item)"
              >
                <div>
                  {{ item.name }}
                </div>
              </div>
            </van-list>
          </div>
          <div class="search-button">
            <van-button
              block
              size="large"
              color="#D58913"
              type="info"
              text="确认选择"
              @click="chooseAction(searchType)"
            />
          </div>
        </div>
      </template>
      <template v-if="popupState == 'map'">
        <Map
          v-if="popupState == 'map'"
          @getLngLat="getLngLat"
          :data="formData"
        ></Map>
      </template>
    </van-popup>

    <div class="container-inner">
      <van-form
        label-width="110px"
        ref="form"
        scroll-to-error
        :show-error-message="false"
        @failed="onFailed"
        @submit="onSubmit"
      >
        <div class="card">
          <div class="card-bar">
            <div class="card-bar-title center">职工注册</div>
          </div>
          <div class="card-container">
            <van-field
              v-model="formData.name"
              required
              clearable
              maxlength="20"
              :rules="[{ required: true, message: '请检查姓名' }]"
              name="name"
              label="姓名"
              placeholder="请输入姓名"
            >
              <template #label>
                <div class="field-title">姓名</div>
              </template>
            </van-field>
            <!-- <van-field readonly clickable is-link name="nationality_name" :value="formData.nationality_name"
              placeholder="点击选择" @click="pickerChange('nationality')" required
              :rules="[{ required: true, message: '请检查国籍' }]">
              <template #label>
                <div class="field-title">国籍</div>
              </template>
            </van-field> -->
            <van-field
              readonly
              clickable
              is-link
              name="origin_name"
              :value="formData.origin_name"
              placeholder="点击选择"
              @click="pickerChange('origin')"
              :readonly="route.id !== undefined"
              required
              :rules="[{ required: true, message: '请检查证件类型' }]"
            >
              <template #label>
                <div class="field-title">证件类型</div>
              </template>
            </van-field>
            <van-field
              v-model="formData.card_no"
              required
              maxlength="18"
              :readonly="route.id !== undefined"
              :rules="
                formData.origin_name == '身份证'
                  ? [
                      {
                        required: true,
                        validator: cardNoValidator,
                        message: '请检查身份证号',
                      },
                    ]
                  : [
                      {
                        required: true,
                        message: '请检查证件号码',
                      },
                    ]
              "
              name="card_no"
              :placeholder="
                formData.origin_name == '身份证'
                  ? '请输入身份证号'
                  : '请输入证件号码'
              "
              @blur="cardNoChange"
            >
              <template #label>
                <div class="field-title">
                  {{ formData.origin_name == '身份证' ? '身份证号' : '证件号' }}
                </div>
              </template>
            </van-field>
            <!-- <van-field readonly clickable is-link v-model="formData.birthday" required
              :rules="[{ required: true, message: '请检查出生日期' }]" name="birthday" placeholder="点击选择"
              @click="pickerChange('date')">
              <template #label>
                <div class="field-title">出生日期</div>
              </template>
            </van-field> -->
            <van-field
              v-model="formData.tel"
              clearable
              maxlength="11"
              type="tel"
              :rules="[{ required: true, message: '请检查联系方式' }]"
              name="tel"
              placeholder="请输入联系方式"
            >
              <template #label>
                <div class="field-title">联系方式</div>
              </template>
            </van-field>
            <!-- <van-field name="sex" required :rules="[{ required: true, message: '请检查性别' }]">
              <template #label>
                <div class="field-title">性别</div>
              </template>
              <template #input>
                <van-radio-group v-model="formData.sex" checked-color="#D58913" direction="horizontal">
                  <van-radio name="1">男</van-radio>
                  <van-radio name="2">女</van-radio>
                </van-radio-group>
              </template>
            </van-field> -->
            <!-- <van-field name="medicalHistoryArr">
              <template #label>
                <div class="field-title">既往病史</div>
              </template>
              <template #input>
                <van-checkbox-group v-model="formData.medicalHistoryArr" @change="medicalHistoryChange"
                  direction="horizontal">
                  <van-row>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="无" shape="square" :disabled="
                        !noHistory && formData.medicalHistoryArr.length > 0
                      ">无</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="营养不良" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">营养不良</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="贫血" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">贫血</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="高血压" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">高血压</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="糖尿病" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">糖尿病</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="心脑血管疾病" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">心脑血管疾病</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="哮喘" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">哮喘</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="慢性肺部疾病" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">慢性肺部疾病</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="肿瘤" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">肿瘤</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="肺结核" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">肺结核</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="慢性肾病" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">慢性肾病</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="慢性肝病" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">慢性肝病</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="免疫缺陷类疾病" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">免疫缺陷类疾病</van-checkbox>
                    </van-col>
                    <van-col span="12">
                      <van-checkbox checked-color="#D58913" name="其他" shape="square" :disabled="
                        noHistory && formData.medicalHistoryArr.length > 0
                      ">其他</van-checkbox>
                    </van-col>
                  </van-row>
                </van-checkbox-group>
              </template>
            </van-field> -->
            <van-field
              readonly
              clickable
              is-link
              name="school"
              :value="formData.school_name"
              placeholder="点击选择"
              @click="pickerChange('school')"
              required
              :rules="[{ required: true, message: '请检查所属学校' }]"
            >
              <template #label>
                <div class="field-title">所属学校</div>
              </template>
            </van-field>
            <van-field
              readonly
              clickable
              is-link
              name="workers_name"
              :value="formData.workers_name"
              placeholder="点击选择"
              @click="pickerChange('workers_type')"
              required
              :rules="[{ required: true, message: '请检查职工类别' }]"
            >
              <template #label>
                <div class="field-title">职工类别</div>
              </template>
            </van-field>
            <van-field
              readonly
              clickable
              is-link
              name="ascription"
              :value="formData.ascription"
              placeholder="点击选择"
              @click="pickerChange('ascription')"
              required
              :rules="[{ required: true, message: '请检查家庭所属区域' }]"
            >
              <template #label>
                <div class="field-title">家庭所属区域</div>
              </template>
            </van-field>
            <van-field
              v-model="formData.quarter"
              required
              clearable
              maxlength="20"
              :rules="[{ required: true, message: '请检查家庭所属小区' }]"
              name="quarter"
              placeholder="请输入家庭所属小区"
            >
              <template #label>
                <div class="field-title">家庭所属小区</div>
                <div class="field-text">(或无则住宅楼名)</div>
              </template>
            </van-field>
            <!-- <van-field v-model="formData.address" rows="3" autosize type="textarea" maxlength="255"
              placeholder="请输入详细地址" required :rules="[{ required: true, message: '请检查详细地址' }]">
              <template #label>
                <div class="field-title">详细地址</div>
              </template>
            </van-field> -->
            <!-- <van-field name="loc">
              <template #label>
                <div class="field-title">家庭位置</div>
              </template>
              <template #input>
                <div class="w100 h100 mid">
                  <van-button class="margin-l-auto" native-type="button" size="small" style="width: 95px"
                    color="#D58913" plain @click="getLocation">获取当前位置
                  </van-button>
                  <van-button class="margin-l-auto" style="width: 100px" native-type="button" size="small"
                    color="#D58913" plain @click="pickerChange('map')"><template #default>
                      <div>家庭位置坐标</div>
                      <div>(小区内即可)</div>
                    </template></van-button>
                </div>
              </template>
            </van-field> -->
          </div>
        </div>
      </van-form>
    </div>

    <div class="bottom-bar">
      <van-button
        class="bottom-bar-btn"
        block
        size="large"
        color="#D58913"
        type="info"
        text="确认提交"
        @click="submitAction"
      />
    </div>
  </div>
</template>

<script>
import {
  getSexByIdCard,
  identityCodeValid,
  getBirthByIdCard,
} from '@/libs/tools'
import {
  getSchoolList,
  // getGradeList,
  // getClassList,
  registerWorkers,
} from '@/api/school.js'
import Map from '@/views/school/components/map'
// import nationality from './dict/nationality'
import area from './dict/area'
import dict from './dict/others'

export default {
  components: { Map },
  data() {
    return {
      // nationality,
      dict,
      area,
      data: {
        num: 1,
        total: 0,
      },
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      loading: true,
      searchApiName: null,
      form: {},
      noHistory: false,
      errorLoading: false,
      finished: false,
      route: {},
      userInfo: {},
      popupShow: false,
      popupState: '',
      pickerType: '',
      searchType: '',
      pickerData: [],
      dataList: [],
      userData: {},
      disabled: {},
      formData: {
        is_student: '0',
        // nationality_name: '中国，中华人民共和国',
        medicalHistoryArr: ['无'],
        // nationality: 'CN',
        origin: '身份证',
        origin_name: '身份证',
      },
      cascaderShow: false,
      cascaderValue: '',
      cascadeOptions: [],
      origin_list: [
        { text: '身份证', value: '身份证' },
        { text: '其他', value: '其他' },
      ],
      fieldNames: {
        text: 'name',
        value: 'code',
        children: 'children',
      },
      dictData: {},
    }
  },

  props: {},

  computed: {},

  watch: {},

  mounted() {
    this.route = this.$route.query
    this.userInfo = this.$store.state.user.userInfo
    this.init()
    this.cardNoChange()
  },

  methods: {
    cardNoChange() {
      // if (this.formData.nationality == 'CN' && this.formData.card_no) {
      if (this.formData.origin == '身份证' && this.formData.card_no) {
        let cardNo = this.cardNoValidator(this.formData.card_no)
        if (cardNo == false) {
          this.failNotice('请检查身份证号')
        } else {
          let sex = getSexByIdCard(this.formData.card_no)
          if (sex) this.$set(this.formData, 'sex', sex.code)
          let birth = getBirthByIdCard(this.formData.card_no)
          if (birth) this.$set(this.formData, 'birthday', birth)
        }
      }
    },
    async init() {
      // 获取区域所属
      let options = this.$common.xeUtils.toArrayTree(this.area, {
        strict: true,
        parentKey: 'parent_id',
        key: 'id',
        children: 'children',
      })
      this.cascadeOptions = options[0].children
      // 首次注册时候的操作
      this.medicalHistoryChange(this.formData.medicalHistoryArr)
      // 初始化表单信息
      this.$set(this.formData, 'card_no', this.userInfo.card_no)
      this.$set(this.formData, 'name', this.userInfo.name)
      this.$set(this.formData, 'tel', this.userInfo.mobile)
      let sex = getSexByIdCard(this.formData.card_no)
      if (sex) this.$set(this.formData, 'sex', sex.code)
    },
    popupClose() {
      this.data.num = 1
      this.data.total = 0
      this.data.name = ''
      this.data.code = ''
      this.data.search = ''
      this.dataList = []
      this.popupState = ''
      this.popupShow = false
    },
    async getSchool() {
      const data = {
        pageNo: this.data.num,
        pageSize: 20,
        name: this.data.name,
        code: this.data.code,
      }
      this.loading = true
      const schoolData = await this.searchApiName(data)
      if (schoolData.data.errcode == 0) {
        this.dataList.push(...schoolData.data.data.results)
        this.dataList.forEach((item) => {
          this.$set(item, 'isChecked', false)
          switch (this.searchType) {
            case 'school':
              if (
                this.formData.school_code &&
                this.formData.school_code == item.code
              ) {
                this.$set(item, 'isChecked', true)
              }
              break
            // case 'grade':
            //   if (
            //     this.formData.grade_code &&
            //     this.formData.grade_code == item.code
            //   ) {
            //     this.$set(item, 'isChecked', true)
            //   }
            //   break
            // case 'class':
            //   if (
            //     this.formData.class_code &&
            //     this.formData.class_code == item.code
            //   ) {
            //     this.$set(item, 'isChecked', true)
            //   }
            //   break
          }
        })
        this.data.total = schoolData.data.data.totalRecord
        this.data.num += 1
        if (schoolData.data.data.pageNo >= schoolData.data.data.totalPage) {
          this.finished = true
        }
      } else {
        this.errorLoading = true
      }
      this.loading = false
    },
    chooseAction(type) {
      switch (type) {
        case 'school':
          this.formData.school_code = this.form.code
          this.formData.school_name = this.form.name
          this.popupShow = false
          this.form = {}
          break
        // case 'grade':
        //   this.formData.grade_code = this.form.code
        //   this.formData.grade_name = this.form.name
        //   this.popupShow = false
        //   this.form = {}
        //   break
        // case 'class':
        //   this.formData.class_code = this.form.code
        //   this.formData.class_name = this.form.name
        //   this.popupShow = false
        //   this.form = {}
        //   break
      }
    },
    onLoad() {
      this.getSchool()
    },
    itemAction(item) {
      this.dataList.forEach((res) => {
        if (res.code != item.code) {
          res.isChecked = false
        }
      })
      this.form.code = item.code
      this.form.name = item.name
      item.isChecked = true
    },
    getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (res) => {
            console.log('res', res) //位置信息
            this.formData.lng = res.coords.longitude
            this.formData.lat = res.coords.latitude
            this.$toast('获取定位成功')
          },
          (res) => {
            console.log('err', res) //位置信息
            this.msg = res.message
            this.$toast('获取定位失败')
          },
          {
            enableHighAccuracy: true, // 高精度
            timeout: 10000, // 超时时间
          }
        )
      } else {
        this.$toast('定位失败')
      }
    },
    pickerChange(type) {
      this.pickerType = type
      switch (type) {
        case 'date':
          this.popupState = 'datePicker'
          this.popupShow = true
          break
        case 'ascription':
          this.popupState = 'cascader'
          this.popupShow = true
          break
        case 'relationship':
          this.popupState = 'picker'
          this.pickerType = 'relationship'
          this.pickerData = this.dict.relationship
          this.popupShow = true
          break
        // case 'nationality':
        //   this.popupState = 'picker'
        //   this.pickerType = 'nationality'
        //   this.pickerData = this.nationality
        //   this.popupShow = true
        //   break
        case 'origin':
          if (!this.route.id) {
            this.popupState = 'picker'
            this.pickerType = 'origin'
            this.pickerData = this.origin_list
            this.popupShow = true
          }
          break
        case 'workers_type':
          this.popupState = 'picker'
          this.pickerType = 'workers_type'
          this.pickerData = this.dict.workers_type
          this.popupShow = true
          break
        case 'school':
          this.searchType = 'school'
          this.popupState = 'search'
          this.popupShow = true
          if (this.formData.school_name) {
            this.data.name = this.formData.school_name
          }
          this.searchApiName = getSchoolList
          this.getSchool()
          break
        // case 'grade':
        //   this.searchType = 'grade'
        //   this.popupState = 'search'
        //   this.popupShow = true
        //   if (this.formData.grade_name) {
        //     this.data.name = this.formData.grade_name
        //   }
        //   if (this.formData.school_code) {
        //     this.data.code = this.formData.school_code
        //   }
        //   this.searchApiName = getGradeList
        //   this.getSchool()
        //   break
        // case 'class':
        //   this.searchType = 'class'
        //   this.popupState = 'search'
        //   this.popupShow = true
        //   if (this.formData.class_name) {
        //     this.data.name = this.formData.class_name
        //   }
        //   if (this.formData.grade_code) {
        //     this.data.code = this.formData.grade_code
        //   }
        //   this.searchApiName = getClassList
        //   this.getSchool()
        //   break
        case 'map':
          this.popupState = 'map'
          this.popupShow = true
          break
      }
    },
    pickerConfirm(e) {
      switch (this.pickerType) {
        case 'relationship':
          this.formData.relationship_name = e.text
          this.formData.relationship = e.value
          this.popupShow = false
          break
        // case 'nationality':
        //   this.formData.nationality_name = e.text
        //   this.formData.nationality = e.value
        //   this.popupShow = false
        //   this.cardNoChange()
        //   break
        case 'origin':
          this.formData.origin_name = e.text
          this.formData.origin = e.value
          this.popupShow = false
          this.cardNoChange()
          break
        case 'workers_type':
          this.formData.workers_name = e.text
          this.formData.workers_type = e.value
          this.popupShow = false
          break
      }
    },
    pickerCancel(e) {
      switch (this.pickerType) {
        case 'relationship':
          this.formData.relationship_name = ''
          this.formData.relationship = ''
          this.popupShow = false
          break
        // case 'nationality':
        //   this.formData.nationality_name = ''
        //   this.formData.nationality = ''
        //   this.popupShow = false
        //   break
        case 'origin':
          this.formData.origin_name = ''
          this.formData.origin = ''
          this.popupShow = false
          break
        case 'workers_type':
          this.formData.workers_name = ''
          this.formData.workers_type = ''
          this.popupShow = false
          break
      }
    },
    cascaderFinish({ value, selectedOptions, tabIndex }) {
      this.formData.ascription =
        selectedOptions[0].name +
        '/' +
        selectedOptions[1].name +
        '/' +
        selectedOptions[2].name
      this.formData.area_code = selectedOptions[0].code
      this.formData.street_code = selectedOptions[1].code
      this.formData.community_code = selectedOptions[2].code
      this.formData.area_name = selectedOptions[0].name
      this.formData.street_name = selectedOptions[1].name
      this.formData.community_name = selectedOptions[2].name
      this.popupShow = false
    },
    cascaderClose() {
      this.formData.ascription = ''
      this.formData.area_code = ''
      this.formData.street_code = ''
      this.formData.community_code = ''
      this.formData.area_name = ''
      this.formData.street_name = ''
      this.formData.community_name = ''
      this.popupShow = false
    },
    datePickerConfirm(e) {
      this.formData.birthday = this.$common.xeUtils.toDateString(
        e,
        'yyyy-MM-dd'
      )
      this.popupShow = false
    },
    datePickerCancel(e) {
      this.formData.birthday = ''
      this.popupShow = false
    },
    searchChange(type) {
      switch (type) {
        // case 'nationality':
        //   if (this.data.search) {
        //     this.pickerData = this.$common.xeUtils.filter(
        //       this.nationality,
        //       (item) => item.text.match(this.data.search)
        //     )
        //   } else {
        //     this.pickerData = this.nationality
        //   }
        //   break
        case 'origin':
          if (this.data.search) {
            this.pickerData = this.$common.xeUtils.filter(this.origin, (item) =>
              item.text.match(this.data.search)
            )
          } else {
            this.pickerData = this.origin_list
          }
          break
        case 'school':
          this.data.num = 1
          this.data.total = 0
          this.dataList = []
          this.getSchool()
          break
        // case 'grade':
        //   this.data.num = 1
        //   this.data.total = 0
        //   this.dataList = []
        //   this.getSchool()
        //   break
        // case 'class':
        //   this.data.num = 1
        //   this.data.total = 0
        //   this.dataList = []
        //   this.getSchool()
        //   break
      }
    },
    medicalHistoryChange(e) {
      for (let i = 0; i < e.length; i++) {
        if (e[i] == '无') {
          this.noHistory = true
          return
        } else {
          this.noHistory = false
          return
        }
      }
    },
    failNotice(msg) {
      this.$notify({ type: 'danger', message: msg })
    },
    onFailed(errorInfo) {
      this.failNotice(errorInfo.errors[0].message)
    },
    // 身份证校验
    cardNoValidator(val) {
      const reg = identityCodeValid(val)
      if (!reg.pass) return false
    },
    getLngLat(e) {
      this.formData.lng = e.lng
      this.formData.lat = e.lat
      this.popupClose()
    },
    submitAction() {
      this.$refs.form.submit()
    },
    async onSubmit() {
      // 校验
      if (this.formData.medicalHistoryArr) {
        this.formData.medical_history =
          this.formData.medicalHistoryArr.join(',')
      }
      this.submitDialog()
    },
    submitDialog() {
      // 提交
      this.$dialog
        .confirm({
          title: '是否确认提交',
          message: '',
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonColor: '#D58913',
          beforeClose: async (action, done) => {
            if (action === 'confirm') {
              const param = {
                ...this.formData,
              }
              // console.log('最终提交信息', param)
              const insertData = await registerWorkers(param)
              if (insertData.data.errcode == 0) {
                this.$toast('操作成功')
                this.$router.go(-1)
                // this.$router.push({
                //   path: '/school/healthWorker',
                //   query: {
                //     workers_id: insertData.data.data.id,
                //     type: 'worker',
                //   },
                // })
                done()
              } else {
                this.$toast(insertData.data.errmsg)
                done()
              }
            } else {
              done()
            }
          },
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="less" scoped>
.container /deep/ .van-checkbox {
  min-height: 30px;
}

.container /deep/ .van-field__label span {
  display: inline-block;
  padding-left: 5px;
  width: 90%;
  text-align-last: justify;
}

.container {
  background: #f2f7fb;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;

  &-inner {
    padding: 20px 20px 40px;
    background: #f2f7fb;

    .card {
      background: inherit;

      &-container {
        border-radius: 10px;
        overflow: hidden;
        background-color: white;
        padding: 10px;
      }
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}

.search {
  position: relative;
  height: 75vh;
  overflow-y: scroll;
  background: #f2f2f2;

  &-body {
    position: sticky;
    width: 100%;
    top: 0;
  }

  &-page {
    padding: 15px 12px 0px;
    background: #f2f2f2;

    &-item {
      background: #fff;
      padding: 20px 10px;
      border-radius: 10px;
      text-align: center;
      margin-bottom: 15px;
    }

    .item-active {
      box-shadow: 0px 0px 5px 3px rgba(255, 145, 0, 0.8);
    }
  }

  &-button {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}

.center {
  text-align: center;
}

.field-title {
  display: inline-block;
  padding: 0 5px;
  font-size: 12px;
  width: 100%;
  text-align-last: justify;
  text-align: justify;
  box-sizing: border-box;
  line-height: 0px !important;
}

.field-title:after {
  content: '';
  display: inline-block;
  width: 100%;
}

.field-text {
  padding: 0 5px;
  font-size: 12px;
}
</style>
